<template>
  <!-- 保养模板筛选框 -->
  <!-- 单选日期组件 -->
  <view class="dateFilter">
    <view class="title">
      {{ title }}
      <text>(单选)</text>
    </view>
    <view class="filterContent">
      <view class="top">
        <view v-for="(item, index) in dateList" :key="index" class="top_item">
          <view
            :class="['tagItem', actValue == item.value ? 'act' : '']"
            @click="chooseDate(item, index)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="bottom">
        <view
          :class="['customInput', 'tagItem', startTime ? 'act' : '']"
          @click="chooseCustomer"
        >
          <input
            type="text"
            v-model="startTime"
            placeholder="开始时间"
            disabled
          />
        </view>
        <view class="line">-</view>
        <view
          :class="['customInput', 'tagItem', endTime ? 'act' : '']"
          @click="chooseCustomer"
        >
          <input
            type="text"
            v-model="endTime"
            placeholder="结束时间"
            disabled
          />
        </view>
      </view>
    </view>

    <!-- 自定义弹出框 -->
    <!-- <time-select
      :defTime="[startTime, endTime]"
      v-if="selectTimePopup"
      :beforeToday="true"
      :isChooseToday="true"
      @close="closeSelectTimePopup"
    ></time-select> -->
  </view>
</template>

<script>
import { elevatorType, contentTemp } from '@/apis/maintains.js';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { getNowTime, getBeforeDate } from '@/utils/utils.js';
export default {
	components: {
		timeSelect,
	},
	props: {
		title: {
			type: String,
			default: '完成时间',
		},
		dateList: {
			type: Array,
			default: () => {
				return [
					{ name: '近7天', value: 7 },
					{ name: '近30天', value: 30 },
					{ name: '近60天', value: 60 },
				];
			},
		},
		dateObj: {
			type: Object,
		},
		isResetDate: {
			type: Boolean,
		},
	},
	data() {
		return {
			actValue: '',
			startTime: '',
			endTime: '',
			selectTimePopup: false,
		};
	},

	created() {
		uni.$on('closeTimeSelect', (res) => {
			let { start, end } = res;
			this.startTime = start;
			this.endTime = end;
			this.selectTimePopup = false;
			this.$emit('getDate', this.tranformDate());
		});
	},
	beforeDestroy() {
		uni.$off('closeTimeSelect');  
	},
	methods: {
		// 初始化日期组件
		initDate(res) {
			// console.log(res,'日期组件获取的值');
			this.actValue = res.value;
			if (!res.value) {
				this.startTime = res.startTime;
				this.endTime = res.endTime;
			} else {
				this.startTime = '';
				this.endTime = '';
			}
		},
		chooseDate(e, i) {
			// console.log(e);
			// 如果再次选择自己置空
			if (e.value == this.actValue) {
				this.actValue = '';
				this.$emit('getDate', { startTime: '', endTime: '' });
			} else {
				this.actValue = e.value;
				this.startTime = this.endTime = '';
				this.$emit('getDate', this.tranformDate());
			}
		},
		tranformDate() {
			let obj = {};
			// 如果是自定义日期,直接返回
			if (!this.actValue) {
				obj = { startTime: this.startTime, endTime: this.endTime, value: '' };
			} else {
				obj = {
					startTime: getBeforeDate(this.actValue),
					endTime: getBeforeDate(1),
					value: this.actValue,
				};
			}
			// console.log(obj,"返回的日期数");
			return obj;
		},
		// 点击自定义日期
		chooseCustomer() {
			this.actValue = '';
			this.selectTimePopup = true;
			uni.$emit('getCustomerSwitch', this.selectTimePopup);
		},
		// 自定义日期确定
		closeSelectTimePopup(res) {
			if (res) {
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				// if (endtime >= nowtime) {
				// 	console.log('包含今天');
				// 	uni.showToast({
				// 		title: '自定义日期范围须小于今天',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				this.startTime = start;
				this.endTime = end;
				this.actValue = '';
				this.$emit('getDate', this.tranformDate());
			} else {
			}
			this.selectTimePopup = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.dateFilter {
  // padding: 30rpx;
  margin-top: 30rpx;
  padding: 20rpx 40rpx;
  .title {
    color: #333;
    font-size: 30rpx;
    font-weight: 600;
    text {
      color: #999;
      font-size: 28rpx;
      font-weight: normal;
    }
  }
  .filterContent {
    .tagItem {
      width: 216rpx;
      height: 48rpx;
      border: 2rpx solid #cccccc;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      color: #666;
      font-size: 28rpx;
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
      white-space: nowrap;
      box-sizing: border-box;
    }
    .act {
      color: #0091ff;
      background-color: #fff;
      border-color: #0091ff;
    }
    .top {
      display: flex;
      justify-content: space-between;
      margin: 16rpx 0;
      .top_item{
        width: 33.3%;
        display: flex;
      }
       .top_item:nth-child(3n){
          justify-content: flex-end;
        }
        .top_item:nth-child(3n+5),.top_item:nth-child(2){
          justify-content: center
        }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .customInput {
        flex: 1;
        margin-right: 0;
        input {
          width: 100%;
          height: 100%;
        }
      }
      .line {
        width: 68rpx;
        display: flex;
        justify-content: center;
        color: #999;
        align-items: center;
      }
    }
  }
  .main {
    display: flex;
  }
  .left {
    background: #f6f6f6;
    .leftItem {
      width: 232rpx;
      // height: 80rpx;
      padding: 20rpx 46rpx;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      background: #f6f6f6;
      font-size: 28rpx;
      color: #666;
      position: relative;
    }
    .redDot {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #e02020;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .right {
    background-color: #fff;
    width: calc(100% - 232rpx);
    padding-left: 30rpx;
    .rightContent {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
    }
    .tagItem {
      width: 208rpx;
      height: 48rpx;
      border: 2rpx solid #cccccc;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      margin-bottom: 20rpx;
      color: #666;
      font-size: 28rpx;
      padding: 0 4rpx;
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
      white-space: nowrap;
    }
    .tagItem:nth-child(2) {
      margin: 0 20rpx;
    }

    .activeTage {
      border-color: #0091ff;
      color: #0091ff;
    }
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
